<template>
	<view class="visitor-wrap">

		<uni-forms :value="user" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item label="我的小区:">
				<view>{{projName}}</view>
			</uni-forms-item>
			<uni-forms-item required label="访客姓名:" name="name">
				<input maxlength="50" placeholder="请输入访客姓名" v-model='user.name' @input="binddata('name',$event.detail.value)">
			</uni-forms-item>
			<uni-forms-item required label="访客身份证:" name="personId">
				<input maxlength="18" placeholder="请输入访客身份证号" @input="binddata('personId',$event.detail.value)" v-model='user.personId'>
			</uni-forms-item>
			<uni-forms-item required label="访客手机号:" name="mobile">
				<input maxlength="50" placeholder="请输入访客手机号" v-model='user.mobile' @input="binddata('mobile',$event.detail.value)">
			</uni-forms-item>
			<!-- <uni-forms-item label="访客车牌号" name="licensePlate">
				<LicensePlateInput @input="binddata('licensePlate',$event)" v-model='user.licensePlate' />
			</uni-forms-item> -->
			<!-- <uni-forms-item required label="访客居住地址" name="address">
				<input maxlength="50" placeholder="请输入访客居住地址" @input="binddata('address',$event.detail.value)" v-model='user.address'>
			</uni-forms-item>
			<uni-forms-item required label="来访事由" name="visitPurpose">
				<textarea auto-height placeholder="请输入来访事由" @input="binddata('visitPurpose',$event.detail.value)" v-model='user.visitPurpose'></textarea>
			</uni-forms-item> -->
			<uni-forms-item required label="开始时间:" name="startTime">
				<date-picker placeholder="请选择开始时间" @input="binddata('startTime',$event)" v-model='user.startTime'></date-picker>
			</uni-forms-item>
			<uni-forms-item required label="到期时间:" name="expiredTime">
				<date-picker placeholder="请选择到期时间" @input="binddata('expiredTime',$event)" v-model='user.expiredTime'></date-picker>
			</uni-forms-item>
			<uni-forms-item label="备注:" name="remarks">
				<input auto-height placeholder="请输入备注" @input="binddata('remarks',$event.detail.value)" v-model='user.remarks'>
			</uni-forms-item>
			<uni-forms-item required label="访客人脸照片:" name="picture">
				<cut-picture :base64="true" width="250rpx" height="250rpx" @input="binddata('picture',$event)" v-model='user.picture'
				 style="width: 100rpx;" />
			</uni-forms-item>


		</uni-forms>
		<button class="btn btn-submit" style="margin-top: 56rpx;" :disabled="isDisabled" @click="submitForm">确认</button>
	</view>
</template>

<script>
	import LicensePlateInput from "../../myComponents/LicensePlateInput.vue"
	import cutPicture from "../../myComponents/cut-picture.vue"
	import datePicker from "../../myComponents/date-picker.vue"
	import dayjs from 'dayjs'
	export default {
		components: {
			LicensePlateInput,
			cutPicture,
			datePicker
		},
		data() {
			return {
				isDisabled: false,
				projName: uni.getStorageSync('userInfo').projName,
				user: {
					projId: uni.getStorageSync('projId'),
					name: null,
					personId: null,
					mobile: null,
					address: '无',
					picture: null,
					needCheck: false, //不需要审核
					type: 'visitor', //访客
					tag: '访客',
					visitPurpose: '业主申请',
					startTime: null,
					expiredTime: null,
					contactName: uni.getStorageSync('userInfo').name,
					contactMobile: uni.getStorageSync('userInfo').mobile,
					licensePlate: null,
					remarks: null,
				},
				//表单验证规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入访客姓名',
						}]
					},
					personId: {
						rules: [{
							required: true,
							errorMessage: '请输入访客身份证号',
						}, {
							//字符串格式，反斜杠要转义\\  开头结尾/ /省略  new RegExp("\\w+") 相当于  /\w+/
							pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
							errorMessage: '身份证号码格式不正确',
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '请输入访客手机号',
						}, {
							//字符串格式，反斜杠要转义\\  开头结尾/ /省略  new RegExp("\\w+") 相当于  /\w+/
							pattern: '^1[23456789]\\d{9}$',
							errorMessage: '手机号码格式不正确',
						}]
					},
					licensePlate: {
						rules: [{
							required: false,
							errorMessage: '请输入车牌号',
						}, ]
					},
					// address: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请输入访客居住地址',
					// 	}, ]
					// },
					// visitPurpose: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请输入来访事由',
					// 	}, ]
					// },
					picture: {
						rules: [{
							required: true,
							errorMessage: '请上传访客人脸照片',
						}, ]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请选择开始时间',
						}, {
							validateFunction: (rule, value, data, callback) => {
					
								if (this.user.expiredTime) {
									if (value && value <= this.user.expiredTime) {
										// 通过返回 resolve
									
										if(this.$funcs.getDuration(value,this.user.expiredTime) > 24*3600*7*1000){
											callback('预约时间不能超过7天')
										}else{
											callback()
										}
										
									} else {
										// 不通过返回 reject(new Error('错误信息'))

										callback('开始时间不能晚于到期时间')
									}
									
								} else {
									callback()
								}

							}
						}, ]
					},
					expiredTime: {
						rules: [{
							required: true,
							errorMessage: '请选择到期时间',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (this.user.startTime) {
									if (value && value >= this.user.startTime) {
										// console.log(this.$funcs.getDuration(this.user.startTime,value), 24*3600*7*1000)
									if(this.$funcs.getDuration(this.user.startTime,value) > 24*3600*7*1000){
										callback('预约时间不能超过7天')
									}else{
										callback()
									}
									} else {
										// 不通过返回 reject(new Error('错误信息'))
										callback('到期时间不能早于开始时间')
									}
								} else {
									callback()
								}

							}
						}, ]
					},
					remarks: {
						rules: [{
							required: false,
						}, ]
					},
				},
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			submitForm(form) {

				console.log('this.user', this.user)
				// 手动提交表单
				this.$refs.form.submit().then(res => {

					console.log('表单数据信息：', res);
					let picture = this.user.picture.replace('data:image/jpeg;base64,', '')
					// let startTime = dayjs(this.user.startTime).format('YYYY-MM-DDTHH:mm:ssZ')
					// let expiredTime = dayjs(this.user.expiredTime).format('YYYY-MM-DDTHH:mm:ssZ')
					let startTime = this.$funcs.toDayStart_RF3339(this.user.startTime)
					let expiredTime = this.$funcs.toDayEnd_RF3339(this.user.expiredTime)
					uni.showLoading({
						title: '提交中...',
					})
					this.$http.post('external/face/user/add', Object.assign({}, this.user, {
						picture,
						startTime,
						expiredTime
					})).then(res => {
						uni.hideLoading()
						if (res.code === 10000) {
							uni.navigateTo({
								url: '../success/success'
							})
						}
					})

				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.visitor-wrap {
		font-size: 32rpx;
		background-color: #f3f3f3;
		min-height: 100vh;
		width: 100vw;
		padding-bottom: 40rpx;
		input {
			height: 60rpx;
		}
		textarea {
			font-size: 32rpx;
		}
	}
</style>
